import React,{useState} from 'react';
import { Space, Table, Tag,Button, Modal,Pagination,message,Popconfirm, Input, } from 'antd';
import { useAppDispatch,useAppSelector } from '@/store/reactreduxts';
import type { TableProps,PopconfirmProps ,GetProps } from 'antd';
import Myform from './myform'
import * as asycnfn from '../../store/crmsSlice'
type SearchProps = GetProps<typeof Input.Search>;
import dayjs from 'dayjs'

const { Search } = Input;

interface DataType {
  key: string;
  name: string;
  age: number;
  address: string;
  tags: string[];
}



const data: DataType[] = [
  {
    key: '1',
    name: 'John Brown',
    age: 32,
    address: 'New York No. 1 Lake Park',
    tags: ['nice', 'developer'],
  },
  {
    key: '2',
    name: 'Jim Green',
    age: 42,
    address: 'London No. 1 Lake Park',
    tags: ['loser'],
  },
  {
    key: '3',
    name: 'Joe Black',
    age: 32,
    address: 'Sydney No. 1 Lake Park',
    tags: ['cool', 'teacher'],
  },
];

const Shoplist: React.FC = () =>{
    let obj=useAppSelector(state=>state.todos)
    let dispatch=useAppDispatch()
    console.log(obj);
    
let [title,setTitle]=useState('添加')    
let [itemobj,setItemobj]=useState({})
console.log(obj);

//对话框 //弹层
const [isModalOpen, setIsModalOpen] = useState(false);

const showModal = () => {
    setIsModalOpen(true);
  };

  const handleOk = () => {
    setIsModalOpen(false);
  };

  const handleCancel = () => {
    setIsModalOpen(false);
  };    
//表头设置
const columns: TableProps<DataType>['columns'] = [
  {
    title: '岗位编号',
    dataIndex: 'bianhao',
  },
  {
    title: '岗位编码',
    dataIndex: 'bianma',
  },
  {
    title: '岗位名称',
    dataIndex: 'name',
  },
  {
    title: '岗位排序',
    dataIndex: 'sort',
  },
   {
    title: '状态',
    dataIndex: 'zhuangtai',
    render:(zhuangtai,item)=>{
        return <Tag color={true?"green":"red"} onClick={()=>{
            
        }}>{zhuangtai?"正常":"异常"}</Tag>
    }
  },
    {
    title: '创建时间',
    dataIndex: 'time',
    render:(time)=>{
      return dayjs(time).format('YYYY-MM-DD HH:mm:ss')
    }
  },
  {
    title: '操作',
    key: 'action',
    render: (_, record) => (
      <Space size="middle">
        <Button type='primary'
        onClick={()=>{
            //显示
            showModal()
            setTitle('编辑')
            setItemobj(record)
        }}
        >编辑</Button>
        <Popconfirm
    title="Delete the task"
    description="Are you sure to delete this task?"
    onConfirm={()=>{
        //执行删除
        dispatch(asycnfn.async_delshoplist(record.id))
    }}
    okText="是"
    cancelText="否"
  >
    <Button danger>删除</Button>
  </Popconfirm>
      </Space>
    ),
  },
];
//输入框的搜索
const onSearch: SearchProps['onSearch'] = (value) =>{
//执行搜索
dispatch(asycnfn.async_searchshoplist(value))
};
return <div>
  <Space>
    <Button type='primary'  
    onClick={()=>{
            //显示
            showModal()
            setTitle('添加')
            setItemobj({})
        }}>添加</Button>
   <Search placeholder="请输入" onSearch={onSearch} enterButton/>  
     </Space>
      <Modal
        title={title}
        closable={{ 'aria-label': 'Custom Close Button' }}
        open={isModalOpen}
        onOk={handleOk}
        onCancel={handleCancel}
        footer={null}
      > 

      <Myform key={new Date().getTime()} itemobj={itemobj} title={title} onCancel={handleCancel}></Myform>
      </Modal>
    <Table<DataType> pagination={{pageSize:4}} columns={columns} dataSource={obj.shoplist} rowKey={'id'}/>;
</div>
};


export default Shoplist;